import { UserOutlined } from "@ant-design/icons";
/*
 * @Descripttion: 头部组件
 * @Author: 毕怀智
 * @Date: 2021-11-24 19:53:48
 * @Function: use of this file
 */

import styled from "@emotion/styled";
import { Avatar, Button, Dropdown, Menu, Switch } from "antd";
import { DevTools } from "jira-dev-tool";
import { useState } from "react";

import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";
import { Row } from "components";
import { useAuth } from "context/AuthContext";
import { resetRoute } from "utils";

import { ProjectPopover } from "./ProjectPopover";
import { UserPopover } from "./UserPopover";

const HeaderComponent = () => {
  const { logout, user } = useAuth();
  const [checked, setChecked]   = useState<any>(false);

  const onChange=(checked)=>{
    setChecked(checked)
  }
  return (
    <Header justifyContent="space-between">
      <HeaderLeft gap={true}>
        <LinkButton type="link" onClick={resetRoute}>
          <SoftwareLogo width={"18rem"} color={"rgb(38, 132, 255)"} />
        </LinkButton>
        <ProjectPopover />
        <UserPopover />
      </HeaderLeft>
      
      <HeaderRight>
      <Switch checkedChildren="开发模式" unCheckedChildren="普通模式"  onChange={onChange}
       style={{width:90,position:'absolute',height:23,right:145,top:25}}/>
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item key={"logout"}>
                <a type="link" onClick={logout}>
                  退出登录
                </a>
              </Menu.Item>
            </Menu>
          }
        >
          
          <Button type="link" onClick={(e) => e.preventDefault()} style={{position:'absolute',right:40,top:15}}>
            {/* <UserOutlined /> */}
            <Avatar src="https://joeschmoe.io/api/v1/1" style={{ width: 38 }}/>
            {user?.name}
          </Button>
        </Dropdown>
      </HeaderRight>
      {checked==true?<DevTools />:''}
    </Header>
  );
};

const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;

const LinkButton = styled(Button)`
  height: 100%;
  line-height: 100%;
`;
const HeaderLeft = styled(Row)``;

const HeaderRight = styled.div``;

export default HeaderComponent;
